<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>websocket-client</title>
</head>
<body>
<div class="chat"></div>
</body>
<script>
    var clientWebSocket = new WebSocket("ws://localhost:8080/echo");
 
    clientWebSocket.onopen = function () {
        console.log("clientWebSocket.onopen", clientWebSocket);
        console.log("clientWebSocket.readyState", "websocketstatus");
        clientWebSocket.send("你好！");
    }
 
    clientWebSocket.onclose = function (error) {
        console.log("clientWebSocket.onclose", clientWebSocket, error);
        events("聊天会话关闭！");
    }
 
    clientWebSocket.onmessage=function (msg) {
        console.log(msg);
        document.querySelector(".chat").innerHTML += msg.data + "<br>";
    }
 
    function events(responseEvent) {
        document.querySelector(".chat").innerHTML += responseEvent + "<br>";
    }
</script>
</html>